// 用于显示点聚合的气泡

function ClusterBubble(options) {
    TMap.DOMOverlay.call(this, options);
}

ClusterBubble.prototype = new TMap.DOMOverlay();

ClusterBubble.prototype.onInit = function (options) {
    this.content = options.content;
    this.position = options.position;
};

// 销毁时需要删除监听器
ClusterBubble.prototype.onDestroy = function () {
    this.dom.removeEventListener('click', this.onClick);
    this.removeAllListeners();
};

ClusterBubble.prototype.onClick = function () {
    this.emit('click');
};

// 创建气泡DOM元素
ClusterBubble.prototype.createDOM = function () {
    var dom = document.createElement('div');
    dom.classList.add('clusterBubble');
    dom.innerText = this.content;
    dom.style.cssText = [
        'width: ' + (36 + parseInt(this.content) * 2) + 'px;',
        'height: ' + (36 + parseInt(this.content) * 2) + 'px;',
        'line-height: ' + (34 + parseInt(this.content) * 2) + 'px;',
    ].join(' ');

    // 监听点击事件，实现zoomOnClick
    this.onClick = this.onClick.bind(this);
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick);
    return dom;
};

ClusterBubble.prototype.updateDOM = function () {
    if (!this.map) {
        return;
    }
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);

    // 使文本框中心点对齐经纬度坐标点
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
    this.dom.style.transform = `translate(${left}, ${top})`;

    this.emit('dom_updated');
};

export {ClusterBubble}